<template>
	<view>
		<template v-if="monthList.length > 0">
			<view class="order-list" v-for="one in monthList">
				<view class="month">
					<text>{{ one.month }}</text>
					<image src="../../static/order_list/calendar-icon.png" mode="widthFix"></image>
				</view>
				<view class="order" v-for="order in one.orders" @tap="viewOrderHandle(order.id)">
					<view class="top">
						<view class="date">{{ order.acceptTime }}</view>
						<view class="amount-status">
							<text class="amount" v-if="order.hasOwnProperty('realFee')">￥{{ order.realFee }}</text>
							<text :class="order.style">{{ order.status }}</text>
						</view>
					</view>
					<view class="content">
						<view class="from">
							<text>{{ order.startPlace }}</text>
						</view>
						<view class="to">
							<text>{{ order.endPlace }}</text>
						</view>
						<view class="desc">
							<text>订单编号：{{ order.id }}</text>
						</view>
					</view>
				</view>
			</view>
		</template>

		<!-- 空视图 -->
		<view class="empty" v-if="monthList.length == 0"><u-empty text="暂无订单信息" mode="list"></u-empty></view>

		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
let dayjs = require('dayjs');
export default {
	data() {
		return {
			monthList: [],
			page: 1,
			length: 50,
			isLastPage: false,
			//是否是第一次进入
			isFirst: false
		};
	},
	methods: {
		loadPageData(ref, isRefresh = false, load = true) {
			let data = {
				page: ref.page,
				length: ref.length
			};
			let status = {
				'1': '等待接单',
				'2': '已接单',
				'3': '司机已到达',
				'4': '开始代驾',
				'5': '结束代驾',
				'6': '未付款',
				'7': '已付款',
				'8': '订单已结束',
				'9': '顾客撤单',
				'10': '司机撤单',
				'11': '事故关闭',
				'12': '其他'
			};
			ref.ajax(
				ref.url.searchDriverOrderByPage,
				'POST',
				data,
				function(resp) {
					let result = resp.data.result;
					let temp = null;
					let orderList = [];
					let monthList = [];
					//下拉刷新前清空数组
					if (isRefresh) {
						ref.monthList.splice(0, ref.monthList.length);
					}
					if (!result.hasOwnProperty('list') || result.list.length == 0) {
						ref.isLastPage = true;
						if (isRefresh) {
							uni.stopPullDownRefresh();
						}
						return;
					}
					for (let one of result.list) {
						if (temp != null && temp != one.month) {
							monthList.push({ month: temp, orders: orderList });
							orderList = [];
						}
						if (one.status == 6) {
							one.style = 'status red';
						} else if (one.status == 7) {
							one.style = 'status green';
						} else if ([9, 10].includes(one.status)) {
							one.style = 'status orange';
						} else {
							one.style = 'status';
						}
						one.status = status[one.status + ''];
						one.acceptTime = dayjs(one.acceptTime, 'YYYY-MM-DD HH-mm-ss').format('MM/DD HH:mm');
						orderList.push(one);
						temp = one.month;
					}
					monthList.push({ month: temp, orders: orderList });
					if (ref.monthList.length == 0) {
						ref.monthList = monthList;
					} else {
						for (let one of monthList) {
							let flag = false;
							for (let temp of ref.monthList) {
								if (one.month == temp.month) {
									temp.orders = temp.orders.concat(one.orders);
									flag = true;
									break;
								}
							}
							if (!flag) {
								ref.monthList.push(one);
							}
						}
					}
					//下拉刷新
					if (isRefresh) {
						uni.stopPullDownRefresh();
					}
				},
				load
			);
		},
		
		viewOrderHandle: function(orderId) {
			uni.navigateTo({
				url: '../../order/order/order?orderId=' + orderId
			});
		}
	},

	onLoad() {},

	//下拉刷新
	onPullDownRefresh() {
		//下拉刷新的操作
		this.page = 1;
		this.loadPageData(this, true, false);
	},

	onReachBottom() {
		let that = this;
		if (that.isLastPage) {
			return;
		}
		that.page = that.page + 1;
		that.loadPageData(that, false, false);
	},

	onShow() {
		if (this.isFirst) {
			this.loadPageData(this, true, true);
			this.isFirst = false;
		} else {
			this.page = 1;
			this.loadPageData(this, true, false);
		}
	}
};
</script>

<style lang="less">
@import url('order_list.less');
</style>
